<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>v-show</title>
</head>
<body>
    <script src="../vue@2.6.14.min.js"></script>
    <div id="app">
        <h3 v-show="isShow">
            显示该文本内容
        </h3>
        <h3 v-show="isHide">
            隐藏该文本内容
        </h3>
        <h3 v-show="null">
            我是文本内容
        </h3>
        <script>
            new Vue({
                el: '#app',
                data() {
                    return {
                        isShow: true,
                        isHide: false
                    }
                }
            })
        </script>
    </div>
    <h3>
        <ol>
            <li>
                v-show是控制元素的显示和隐藏的一个指令
            </li>
            <li>
                v-show放到哪个标签里，就自动和这个标签元素绑定,控制该标签元素的显示和隐藏
            </li>
            <li>
                语法：v-show="xxx"<br>
                这里是xxx可以是任意内容，最终都会被转换为布尔值。比如：<br>
                v-show="0" // 0转换为布尔值就是false， 元素会隐藏<br>
                v-show="1" // 1转换为布尔值就是true，元素会显示<br>
                v-show="'hello'" // 'hello'是长度大于0的字符串，转换为布尔值就是true，元素会显示<br>
                v-show="null"或者v-show="undefined" // null和undefined转换为布尔值都是false，元素会隐藏<br>
                如果xxx是一个变量，就看这个变量的值转换为布尔值是true还是false。
                如果变量的值为true，则该标签元素就会被添加一个行内样式：style="display: block;" <br>
                如果变量为false，则该标签就会被添加一个行内样式：style="display: none;"
            </li>
            <li>
                v-show语法中的变量的值，可以是任意数据类型
            </li>
        </ol>
    </h3>
</body>
</html>